<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模仿单个小球坠落</title>
</head>
<body>
    <canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto">
        当前浏览器不支持canvas，请更换浏览器再试
    </canvas>

    <script>
        //创建一个小球，参数分别是：（x坐标，y坐标，半径，加速度，x方向速度，y方向速度，颜色）
        var ball = { x: 512, y: 100, r: 20, g: 0, vx: -4, vy: 0, color: "#058" }

        window.onload = function () {
            var canvas = document.getElementById('canvas');
            canvas.width = 1024;
            canvas.height = 768;

            
            var context = canvas.getContext('2d');

            setInterval(function () {
                render(context);
                update();
            },50);

            function update(){
                ball.x += ball.vx;
                ball.y += ball.vy;
                ball.vy += ball.g;

                if(ball.y >= 768-ball.r){
                    ball.y = 768 - ball.r;
                    ball.vy = -ball.vy;
                }

                if(ball.y <= ball.r){
                    ball.y = ball.r;
                    ball.vy = -ball.vy*0.9;
                }

                if(ball.x <= ball.r){
                    ball.x = ball.r;
                    ball.vx = - ball.vx;
                }

                if(ball.x >= 1024-ball.r){
                    ball.x = 1024 - ball.r;
                    ball.vx = - ball.vx;
                }
            }

            function render(cxt){
                cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);

                cxt.fillStyle = ball.color;
                cxt.beginPath();
                cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
                cxt.closePath();

                cxt.fill();
            }
        }
    </script>
</body>
</html>